<script setup>

import { useRouter } from 'vue-router'
const router = useRouter();
const goRoommate = () => {
  router.push('/roommate')
}
const goMdEditor = () => {
  router.push('/mdEditor')
}
const goShare = () => {
  router.push('/share')
}
const goMarket = () => {
  router.push('/market')
}
const goVoucher = () => {
  router.push('/voucher')
}

import { ref, reactive } from 'vue'
import { useUserInfoStore } from '@/stores/userInfo.js'
const userInfoStore = useUserInfoStore()
const test = ref('')
test.value = userInfoStore.info.number


import { onMounted } from 'vue';

const multiple = 8;
const elementClass = "element";
const imgClass = "g-img";
const mouseOverContainer = document.getElementsByTagName("body")[0];
let elements, imgs;

function transformElement(element, img, x, y) {
  let box = element.getBoundingClientRect();
  const calcX = -(y - box.y - box.height / 2) / multiple;
  const calcY = (x - box.x - box.width / 2) / multiple;
  const percentage = parseInt((x - box.x) / box.width * 1000) / 10;

  element.style.transform = "rotateX(" + calcX + "deg) " + "rotateY(" + calcY + "deg)";
  img.style = `--per: ${percentage}%`;
}

onMounted(() => {
  setTimeout(() => {
    elements = document.querySelectorAll(`.${elementClass}`);
    imgs = document.querySelectorAll(`.${imgClass}`);

    mouseOverContainer.addEventListener("mousemove", (e) => {
      for (let i = 0; i < elements.length; i++) {
        const element = elements[i];
        const img = imgs[i];
        if (isMouseOverElement(e, element)) {
          window.requestAnimationFrame(function () {
            transformElement(element, img, e.clientX, e.clientY);
          });
        }
      }
    });

    mouseOverContainer.addEventListener("mouseleave", (e) => {
      for (let i = 0; i < elements.length; i++) {
        const element = elements[i];
        window.requestAnimationFrame(function () {
          element.style.transform = "rotateX(0) rotateY(0)";
        });
      }
    });
  }, 1000); // 延迟1s
});

function isMouseOverElement(event, element) {
  const rect = element.getBoundingClientRect();
  const mouseX = event.clientX;
  const mouseY = event.clientY;

  return (
    mouseX >= rect.left &&
    mouseX <= rect.right &&
    mouseY >= rect.top &&
    mouseY <= rect.bottom
  );
}
import homeImage from '@/assets/home.jpg';

const backgroundImage = homeImage;

import EasyTyper from "easy-typer-js";
// 这里用ref会报错
const obj = reactive({
  output: "",
  isEnd: false,
  speed: 100, // 打字速度
  singleBack: false, // 单次的回滚（优先级高于type）
  sleep: 2000, // 完整输出完一句话后，停留2秒再回滚
  type: "normal", // 下一次的行为为回滚模式
  backSpeed: 50, // 回滚速度
  sentencePause: false, // 在回滚模式下，整个生命周期运行完毕后句子暂停显示
});

const headObj = ref({
  output: "",
  isEnd: false,
  speed: 100,
  singleBack: false,
  sleep: 0,
  type: "normal",
  backSpeed: 100,
  sentencePause: false,
})

const fetchData = () => {
  fetch("https://v1.hitokoto.cn")
    .then((res) => {
      return res.json();
    })
    .then(({ hitokoto }) => {
      new EasyTyper(
        obj,
        hitokoto,
        () => { },
        () => { }
      );
    });
};
onMounted(() => {
  fetchData();
  const typed = new EasyTyper(headObj.value, `欢迎来到懂你小助手`)
});
</script>

<template>
  <div :style="{ backgroundImage: 'url(' + backgroundImage + ')' }">
    <el-container style="flex-direction: column">
      <div class="head">
        <el-header>{{ headObj.output }}</el-header>
      </div>

      <!-- 打字机 -->
      <div class="title">
        {{ obj.output }}
        <span class="easy-typed-cursor">|</span>
      </div>

      <div class="main">
        <el-main>

          <div class="container">

            <div class="row">
              <div class="element">
                <div class="g-img g-img1" @click="goRoommate()">
                  <div class="text-wrapper">室友匹配</div>
                </div>
              </div>
              <div class="element">
                <div class="g-img g-img2" @click="goMdEditor()">
                  <div class="text-wrapper">笔记</div>
                </div>
              </div>
              <div class="element">
                <div class="g-img g-img3" @click="goShare()">
                  <div class="text-wrapper">校园墙</div>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="element">
                <div class="g-img g-img4" @click="goMarket()">
                  <div class="text-wrapper">二手集市</div>
                </div>
              </div>
              <div class="element">
                <div class="g-img g-img5" @click="goVoucher()">
                  <div class="text-wrapper">优惠券</div>
                </div>
              </div>
              <div class="element">
                <div class="g-img g-img6" @click="goRoommate()">
                  <div class="text-wrapper">室友匹配</div>
                </div>
              </div>

            </div>

          </div>

        </el-main>
      </div>
    </el-container>
  </div>
</template>



<style lang="scss" scoped>
/* 卡片排列 */
.container {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  justify-content: space-between;
  margin-left: 200px;
  margin-right: 200px;
  margin-top: 30px;
}
/* body {
  width: 100vw;
  height: 100vh;
  display: flex;
  transform-style: preserve-3d;
  perspective: 500px;
  cursor: pointer;
  background: #000;
} */

.element {
  margin: auto;
  width: 250px;
  height: 250px;
  background: linear-gradient(45deg, black, deeppink, #6006ff);
  border-radius: 10px;
  transform-style: preserve-3d;
  transition: all .1s;
}

.g-img {
  position: relative;
  width: 100%;
  height: 100%;
  background:
    url('https://pic3.zhimg.com/80/v2-19541a5889857a42bfe5b1d3e8fad046_720w.webp');
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  filter: brightness(1.2);

  &::after {
    content: "";
    display: none;
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/13471/sparkles.gif");
    mix-blend-mode: color-dodge;
  }

  &::before {
    content: "";
    display: none;
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background:
      linear-gradient(115deg,
        transparent 0%,
        #06e8ff var(--per),
        #ffab2e calc(var(--per) + 25%),
        #12ebff calc(var(--per) + 50%),
        transparent 100%);
    mix-blend-mode: color-dodge;
  }

  &:hover::after,
  &:hover::before {
    display: block;
  }
}

.g-img1 {
  position: relative;
  width: 100%;
  height: 100%;
  background:
    url('@/assets/card1.jpg');
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  filter: brightness(1.2);
}

.g-img2 {
  position: relative;
  width: 100%;
  height: 100%;
  background:
    url('@/assets/card2.jpg');
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  filter: brightness(1.2);
}

.g-img3 {
  position: relative;
  width: 100%;
  height: 100%;
  background:
    url('@/assets/card3.jpg');
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  filter: brightness(1.2);
}

.g-img4 {
  position: relative;
  width: 100%;
  height: 100%;
  background:
    url('@/assets/card4.jpg');
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  filter: brightness(1.2);
}

.g-img5 {
  position: relative;
  width: 100%;
  height: 100%;
  background:
    url('@/assets/card5.jpg');
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  filter: brightness(1.2);
}

.g-img6 {
  position: relative;
  width: 100%;
  height: 100%;
  background:
    url('@/assets/card6.jpg');
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  filter: brightness(1.2);
}


/*页面上部分*/
.head {
  display: flex;
  flex: 20vh;
  width: 100%;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  font-family: '华文彩云';
}

/*页面下部分*/
.main {
  height: 80vh;
  width: 100%;
}

/* 隐藏滚动条 */


/*卡片相关样式*/
.el-card {
  width: 200px;
  height: 200px;
  margin: 40px;
  border-radius: 30px;
  opacity: 0.7 !important;
}

/*卡片图片*/
.card-image {
  width: 130%;
  border-radius: 30px;
  margin-top: -20px;
  margin-left: -25px;
  z-index: -2;
}

/* el-card卡片文本 */
.text {
  flex: 1;
  padding-top: 20px;

}

/* 卡片文本 */
.text-wrapper {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  width: 100%;
  /* 让文字占据整个父元素的宽度 */
  height: 100%;
  /* 让文字占据整个父元素的高度 */
  color: rgb(13, 201, 234);
  /* 文字颜色，可以根据需要修改 */
  font-size: 34px;
  /* 文字大小，可以根据需要修改 */
  text-align: center;
  /* 文字水平居中 */
  font-family: '华文彩云';
}

/*.el-card.is-always-shadow {
  box-shadow: 0 5px 12px 0 red;
}*/

.flex {
  display: flex;
  justify-content: center;
}

.title {
  //水平居中
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "幼圆";
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.easy-typed-cursor {
  margin-left: 0.625rem;
  opacity: 1;
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
</style>
